<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>layout页面布局</title>
	<!-- 引入easyui相关的资源文件 -->
	<link rel="stylesheet" type="text/css"
	 href="${pageContext.request.contextPath}/js/easyui/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/js/easyui/themes/icon.css">
	<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.8.3.js"></script>
	<script type="text/javascript"
	 src="${pageContext.request.contextPath}/js/easyui/jquery.easyui.min.js"></script>
</head>
<body class="easyui-layout">
	<!-- 每个div是一个区域 -->
	<div data-options="region:'north',title:'系统2.0'" style="height: 150px">北部区域</div>
	<div data-options="region:'west'" style="width: 200px">
		<div class="easyui-accordion" data-options="fit:'true'">
			<div data-options="iconCls:'icon-add'" title="yi">
				折叠面板一
			</div>
			<div data-options="iconCls:'icon-add'" title="yi">
				折叠面板二
			</div>
			<div data-options="iconCls:'icon-add'" title="yi">
				折叠面板二
			</div>
		</div>
	</div>
	<div data-options="region:'center'">
		<div class="easyui-tabs" >
			<div data-options="iconCls:'reload'" title="选项卡一">
			选项卡一
			</div>
			<div data-options="closable:true,iconCls:'icon-reload'" title="选项卡一">
				选项卡一内容
			</div>
		</div>
	</div>
	<div data-options="region:'east'" style="width: 100px">东部区域</div>
	<div data-options="region:'south'" style="height: 50px">南部区域</div>
</body>
</html>